<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const itemsPerPage = ref(10);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '原作者', key: 'author', sortable: false},
    {title: '素材标题', key: 'title', sortable: false},
    {title: '关键词', key: 'keywords', sortable: false},
    {title: '媒体名称', key: 'mediaName', sortable: false},
    {title: '栏目名称', key: 'columnName', sortable: false},
    {title: '地点', key: 'location', sortable: false},
    {title: '人物', key: 'personalname', sortable: false},
    {title: '核心词', key: 'coreword', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const imgBaseUrl = ref("http://192.192.41.21:800/");

const search = ref('');
const name = ref(null);
watch(name, () => {
    search.value = name.value
})

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    axios.post('/publicOpinionAnalysis/select', {
        pageNo: page,
        pageSize: itemsPerPage
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: itemsPerPage.value});
});
</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>舆情管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details placeholder="查询名称"></v-text-field>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <!-- <template v-slot:item.eventImages="{ item }">
            <el-image :src="imgBaseUrl + item.raw.eventImages" style="height: 50px;" alt=""></el-image>
        </template> -->
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
